<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Table</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 800px;
            margin: 20px auto;
            font-size: 14px;
        }

        .border_table {
            /* 边框合并 */
            border-collapse: collapse;
            /* 相邻单元格的边框间的距离 */
            border-spacing: 0;
            width: 100%;
            /* 设置fixed后可通过在标题中设置width来控制列的宽度 */
            table-layout: fixed;
        }

        .border_table td,
        .border_table th {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #th3 {
            width: 60%;
        }

        /* 设置奇数行颜色 */
        .border_table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        /* 设置鼠标滑过行颜色 */
        .border_table tbody tr:hover {
            background: #fbf8e9;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <table class="border_table">
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>编号</th>
                    <th>伪类表达式</th>
                    <th id="th3">说明</th>
                </tr>
            </thead>
            <!-- 表身 -->
            <tbody>
                <tr>
                    <td>1</td>
                    <td>:first-child</td>
                    <td>选择某个元素的第一个子元素。</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>:last-child</td>
                    <td>选择某个元素的最后一个子元素。</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>:first-of-type</td>
                    <td>选择一个上级元素下的第一个同类子元素。选择一个上级元素下的第一个同类子元素。</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>